<template>
  <div class="taskpage">
        <div class="task_nav">
              <p class="tp"><i class="iconfont icon-renwuguanli"></i>任务管理</p>
              <ul>
                <li v-for="(item,key) in nav_a" :key="key" >
                    <div class="div"  :class="navName == item.name?'active':''" @click="navClick(item)">
                          <span></span>
                           <p>{{item.name}}</p>
                    </div>
                   
                </li>
              </ul>
              <p class="tp"><i class="iconfont icon-renwutongji"></i>任务统计</p>
              <ul>
                 <li v-for="(item,key) in nav_b" :key="key">
                    <div class="div"  :class="navName == item.name?'active':''" @click="navClick(item)">
                           <span></span>
                           <p>{{item.name}}</p>
                    </div>
                </li>
              </ul>
        </div>
        <div class="task_body">
               <router-view/>
        </div>
  </div>
</template>

<script>
export default {
  name: 'taskmanage',
  data(){
      return{
          navName:'全部任务',
          nav_a:[{
            name:'全部任务',
            path: '/operaAndmaint/task/allTask',
          },{
            name:'我的任务',
            path: '/operaAndmaint/task/myTask',
          },{
            name:'关注的任务',
            path: '/operaAndmaint/task/followTask',
          },{
            name:'共享给我的任务',
            path: '/operaAndmaint/task/shareTask',
          }],
          nav_b:[{
            name:'任务统计',
             path: '/operaAndmaint/task/taskStat',
          },{
            name:'任务报表',
             path: '/operaAndmaint/task/taskReport',
          },],
      }
  },
  created(){
     this.$store.commit("setShowlefttree", false);
      if (sessionStorage.getItem("navName")) {
        this.navName = sessionStorage.getItem("navName");
      }
  },
  methods:{
    navClick(item){
      this.navName=item.name;
       sessionStorage.setItem("navName", item.name);
      this.$router.push(item.path);
    }
  }
}
</script>

<style scoped lang="less">
.taskpage{
  height: 100%;
  background: #eff3f5;
  .task_nav{
    float: left;
    height: 100%;
    width: 198px;
    border: 1px solid #d9e6f7;
    background: #fff;
    .tp{
      height: 46px;
      line-height: 46px;
      padding-left: 40px;
      color: #1a1a1a;
      position: relative;
      i{
        color: #166bce;
        position: absolute;
        left: 18px;
        top: 15px;
        font-size: 16px;
        line-height: 16px;
      }
    }
    ul{
      li{
          color: #666;
          height: 35px;
          line-height: 35px;
          cursor: pointer;
          position: relative;

          .div{
            span{
              position: absolute;
              width: 9px;
              height: 9px;
              border-radius: 50%;
              border: 1px solid #666;
              left: 40px;
              top: 13px;
              &::before{
                content: '';
                position: absolute;
                width: 3px;
                height: 3px;
                border: 1px solid #666;
                left: 1px;
                top: 1px;
                border-radius: 50%;
              }
            }
            p{
                 padding-left: 55px;
            }
           
          }
          .active{
            color: #fff;
            line-height: 31px;
            position: absolute;
            left: -5px;
            top: 0px;
            width: 201px;
            height: 35px;
            background: url("../../assets/images/nav/y_di_link_bg.png") no-repeat 0px center;
            background-size: 201px 35px;
            span{
              border-color: #fff;
              left: 45px;
              &::before{
                 border-color: #fff;
              }
            }
            p{
                 padding-left: 60px;
            }
          }
      }
      
    }
  }
  .task_body{
    float: right;
    width: calc(100% - 204px);
    height: 100%;
    
  }
}
</style>
